<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="shortcut icon" href="../img/6-favicon.ico" type="image/x-icon">
    <title>注册</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }

        html,
        body {
            width: 100%;
            height: 100%;
        }
        #regin {
            width: 600px;
            height: 600px;
            border: 1px solid #ccc;
            background: rgba(255, 255, 255, .8);
            box-shadow: 1px 1px 20px rgb(124, 121, 121);
            border-radius: 20px;
            position: absolute;
            top: 50px;
            left: 0;
            right: 0;
            bottom: 0;
            margin: auto;
            margin-top: 100px;
            padding: 30px;
        }

        #regin .reg_p1 {
            width: 400px;
            text-align: center;
            font-size: 28px;
        }

        #regin input {
            border: 0;
            text-indent: 1em;
            outline: none;
            border: 1px solid #ccc;
        }

        #regin>input {
            width: 400px;
            height: 45px;
        }

        #regin .reg_p2 {
            width: 400px;
            height: 45px;
        }

        #regin .reg_p2 input {
            width: 300px;
            height: 45px;
        }

        #regin .reg_p2 span {
            width: 80px;
            height: 45px;
            display: block;
            background: #ccc;
            float: right;
            font-size: 12px;
            text-align: center;
            line-height: 45px;
        }

        #regin button {
            width: 400px;
            height: 45px;
           /*  background: #666; */
           background: #fd8d44;
            color: #fff;
            text-align: center;
            line-height: 45px;
            border: 0;
            margin-bottom: 10px;
            outline: none;
        }

        #regin .btnBackground{
            cursor: pointer;
            background: #333;
        }

        #regin>input,
        #regin p {
            margin-bottom: 23px;
        }

        #regin .reg_p3{
            width: 400px;
            font-size: 12px;
        }

        #regin .reg_p3 em{
            font-style: normal;
            float: right;
            color: rgb(255, 102, 0);
            cursor: pointer;
        }

        /* 正则 */
        #regin i{
            font-style: normal;
            font-size: 8px;
            color: #666;
        }
        #regin .testGreen{
            color: green;
        }
        #regin .testRed{
            color: #f00;
        }

        h1,h2,h3,h4,h5,h6,i,em,var,b,strong{
    font-weight: normal;
    font-style: normal;
}
ul,ol,li{
    list-style: none;
}
a{
    text-decoration: none;
}
 body{
    font-size: 14px;
    background: rgb(209, 208, 208);
} 
.noborder{
    border:0!important;
}
.noMargin{
    margin:0!important;
}
img{
    vertical-align: middle;
}

.same{
    width: 980px;
    margin: 0 auto;
}
.fixed{
    width: 50px;
    height: 940px;
    background-color: black;
    position: fixed;
    right: 0;top: 0;
    
}


        .toAll{
    width: 100%;
    height: 100px;
    background: rgb(255, 255, 255);
   
}
.header{
    height: 80px;
    color: #333;
    padding: 10px 0;
    display: flex;
    justify-content: space-between;
   
}
.such{
    height: 80px;
    line-height: 80px;
}
.such span{
    background: #fd8d44;
}
.such a{
    color: #ffffff;
}
#v_container{
				width: 110px;
			 	height: 40px;
			}
 .yanzheng{
    display: flex;
    justify-content: space-around;
    float: left;
} 
#code_input{
    height: 38px;
    width: 120px;
}
.yanzheng{
    margin-bottom: 15px;
}
.yanzheng>#my_button{
    height: 40px;
    width: 45px;
    background: #666;
}
.reg_p1{
    color: #fd8d44;
}



.nxy{
    width: 180px;
    height: 30px;
    display: flex;
    justify-content: space-between;
}
.nxy div{
    width: 30px;
    height: 30px;
    margin-top: 20px;
}
.qqy{
    background: url(../img/2.png) no-repeat -40px 0;
}
.wby{
    background: url(../img/2.png) no-repeat 0 0;
}
.zfby{
    background: url(../img/2.png) no-repeat -80px 0;
}
.wxy{
    background: url(../img/2.png) no-repeat -200px 0;
}
    </style>
</head>

<body>
    <div class="toAll">
        <div class="header same">
          <a href="../html/index.html">
            <img src="../img/logo.gif" alt="">
        </a>
            <div class="such">如已注册，点击<span> <a href="login.html">登录</a> </span></div>
        </div>
    </div>
    <div id="regin">
        <p class="reg_p1">
           新用户注册
        </p>
        <input type="text" placeholder="手机号" class="reId reI">
        <i>请输入11位的手机号</i>
        <input type="text" placeholder="请设置用户名" class="reUser reI"> 
        <i>只能由英文、数字、下划线组成</i> 
        <input type="password" placeholder="请设置密码" class="rePass reI">
        <i>英文、数字、下划线组成，最少6位</i> 
        <input type="password" placeholder="确认密码" class="selectPass">
        <div class="yanzheng">
            <div id="v_container"></div>
            <input type="text" id="code_input" value=""
             placeholder="请输入验证码"/><!-- <button id="my_button">验证</button> -->
        </div>
        <script src="../js/gVerify.js"></script>
        <script>
            var verifyCode = new GVerify("v_container");
            console.log(verifyCode)
            document.getElementById("my_button").onclick = function(){
                var res = verifyCode.validate(document.getElementById("code_input").value);
                if(res){
                    alert("验证正确");
                }else{
                    alert("验证码错误");
                }
            }
        </script>      
        <button class="reBtn">同意协议并注册</button>
        <p class="reg_p3">
            <input type="checkbox" class="lastput">
            <span> 我已阅读并同意《用户协议》</span>
            <em>已有帐号？</em>
        </p>
        <div class="sydsfang">
            <p>使用第三方账户登录</p>
           <div class="nxy">
               <div class="qqy">                                  
               </div>
               <div class="wby">                                  
              </div>
              <div class="zfby">                                  
              </div>
              <div class="wxy">                                  
              </div>

           </div>
        </div>
    </div>
    <script src="../js/ajax.js"></script>
    <script src="../js/regin.js"></script>
    
</body>

</html>